<template>
    <!-- 在template中只能存在一个根组件  -->
    <div class="event">
        <ul>
            <li v-on:click.once="getItemInfo(item, $event)" v-for="(name, item) in names" :key="item">{{ name }}</li>
        </ul>

        <input type="text" v-on:keyup.enter="getInput">
        <button v-on:click="addArr">添加数组</button>

        <div>
            <p>{{ msgRed }}</p>
            <p>{{ msgRed }}</p>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            names:['xm', 'xl', 'xz'],
            message:'huang cong',
        }
    },
    methods:{
        getItemInfo(item, event) {
            console.log(item)
            console.log(this.names[item])
            console.log(event)
        },
        getInput(event){
            console.log(event)
        }, 
        addArr() {
            // console.log(11)
            // this.names.push("huang")
            this.names.concat(["hello"])
            console.log(this.names)
        }
    },
    computed:{
        msgRed(){
            return this.message.split('').reverse().join('')
        }
    }
}
</script>
<style>

</style>

